"use client";
import { useTranslations } from "next-intl";
import { Button, Input, type FormProps } from "antd";
import { useState, useRef, useEffect } from "react";
import { useRouter } from "next/navigation";
import Layout from "@/components/Layout";
import Chart from "@/components/Chart";
import Sortable from "sortablejs";
import TopCarousel from "./components/top-carousel";
import SelectOrder from "./SelectOrder";
import ImageCarousel from "./components/ImageCarousel";
import boardList from "./board";

import styles from "./index.module.less";

export default function Dashboard() {
  const t = useTranslations("index");
  const slides = [
    {
      src: "/news_cover_1.png",
      alt: t("Monster group") as string,
      title: t("Monster group") as string,
      date: "2023/09/08",
    },
    {
      src: "/news_cover_1.png",
      alt: t("Monster group") as string,
      title: t("Monster group") as string,
      date: "2023/09/06",
    },
    {
      src: "/news_cover_1.png",
      alt: t("Monster group") as string,
      title: t("Monster group") as string,
      date: "2023/09/09",
    },
    // ... 其他幻灯片
  ];
  const boardContainerRef = useRef<any>();
  const [imgSlides, setImgSlides] = useState(slides);

  useEffect(() => {
    setTimeout(() => {
      const sortable = new Sortable(
        document.querySelector("#dashboard") as HTMLElement,
        {
          handle: ".moveBtn",
        }
      );
    }, 1000);
  }, [boardContainerRef]);
  
  return (
    <Layout curActive="/dashboard">
      <div className={styles.carouselWrap}></div>
      <TopCarousel />
      <main className={styles.dashboardWrap} style={{padding: '24px'}}>
        <SelectOrder />
        <ImageCarousel slides={imgSlides} />
      </main>
    </Layout>
  );
}
